import React from 'react'
import { randomNum, calculateWidth } from '../../utils/utils'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import { Form, Input, Button,Icon } from 'antd'
import PromptBox from '../../components/PromptBox'
import API from '../../axios/api'

@withRouter @inject('appStore') @observer @Form.create()
class LoginForm extends React.Component {
  state = {
    focusItem: -1,
  }

  loginSubmit = (e) => {
    e.preventDefault()
    this.setState({
      focusItem: -1
    })
    this.props.form.validateFields((err, values) => {
      if (!err) {
          let params = {
              "UserName": values.username,
              "Password": values.password,
          }

          API.login(params).then((res) => {
              console.log(res.Data)
              if(res.Code === 200) {
                  this.props.appStore.toggleLogin(true, res.Data)

                  const {from} = this.props.location.state || {from: {pathname: '/'}}
                  this.props.history.push(from)
              } else {
                  this.setState({
                      errorMsg: res.Message
                  })
              }
          })
      }
    })
  }

  render2(){
      const { getFieldDecorator } = this.props.form;
    return (
        <div className="loginWrap">
            <Form onSubmit={this.handleSubmit}>
                <Form.Item>
                    {getFieldDecorator('username', {rules: [{ required: true, message: '请输入用户名' }],})(
                        <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder="Username" />
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {rules: [{ required: true, message: '请输入密码' }],})(
                        <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                    )}
                </Form.Item>
                <span style={{color: 'red'}}>{this.state.errorMsg }</span>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="loginBtn">Login</Button>
                </Form.Item>

            </Form>
        </div>
    )
  }

    render () {
        const {getFieldDecorator, getFieldError} = this.props.form
        return (
            <div className="loginWrap">
                <Form onSubmit={this.loginSubmit}>
                    <Form.Item help={getFieldError('username') &&
                    <PromptBox info={getFieldError('username')} width={calculateWidth(getFieldError('username'))}/>}>
                        {getFieldDecorator('username', {
                            rules: [{required: true, message: '请输入用户名'}]
                        })(
                            <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder="Username" />
                        )}
                    </Form.Item>
                    <Form.Item help={getFieldError('password') &&
                    <PromptBox info={getFieldError('password')} width={calculateWidth(getFieldError('password'))}/>}>
                        {getFieldDecorator('password', {rules: [{ required: true, message: '请输入密码' }],})(
                            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                        )}
                    </Form.Item>
                    <span style={{color: 'red'}}>{this.state.errorMsg }</span>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="loginBtn">Login</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const styles = {
  focus: {
    width: '20px',
    opacity: 1
  },
}

export default LoginForm
